<template>
    <div class="main-bg">
        <img class="img-main-bg" alt="">
        <div style="position: absolute;left:15%;right:15%; heigt:120px; top:9%; border:0px solid red;z-index: 999; text-align:center;color:#D8BFD8;font-size: 1.3vw;font-weight: 600;">
                <label style="margin-left:8%;">南京杰思尔环保智能科技有限公司</label>(原南京杰思尔设备工程有限公司)是中国石化仪表检维修系统改制后成立的 <label style="margin-left:4%;">民营高科技企业</label>，是污染源仪器、实验室分析仪器销售，
                地表自动水站、空气站集成、销售及技术服务的专业化公司。公司是E+H产品及科尔康气体报警仪在中石化框架协议的供货商，是污染源连续自动监测第三方运维服务提供商。
        </div>
        <img  src="~@/assets/home/title.png" style="position: absolute;width: 75vw;  z-index: 999; left:12%; top:21%;"  alt="">

        <img @click="toRouter('pollution')" class="wswpt" style="width: 13vw; height:width: 13vw; " src="~@/assets/home/污染源平台.png" alt="">

        <img @click="toRouter('water')" class="szpt" style="width: 13vw; height:width: 13vw; " src="~@/assets/home/水站平台.png" alt="">

        <img @click="toRouter('air')" class="kqpt" style="width: 13vw; height:width: 13vw; " src="~@/assets/home/空气站平台.png" alt="">

        <img @click="toRouter('bigScreen')" class="zhglpt" style="width: 13vw; height:width: 13vw; " src="~@/assets/home/综合管理平台.png" alt="">
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "home",
        methods:{
            toRouter(e){
                console.log(this.$menu);
                if(this.$menu.has('/'+e)){
                    this.$router.push(e);
                    return ;
                }else{
                    this.$message.info("没有权限进入!");
                }

            }
        },
      mounted() {
        console.log(this.$menu)
      }
    }
</script>

<style scoped>
    .main-bg {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .img-main-bg {
        height: 100%;
        width: 100%;
        background: url('../../assets/home/home_bg.png') no-repeat;
        background-size: cover;
        position: absolute;
        z-index: 1;
    }

    .wswpt, .szpt, .kqpt, .zhglpt {
        position: absolute;
        z-index: 2;
        overflow: hidden;
    }

    .wswpt, .szpt, .kqpt, .zhglpt {
        cursor: pointer;
        transition: all 0.6s;
    }

    .wswpt:hover, .szpt:hover, .kqpt:hover, .zhglpt:hover {
        transform: scale(1.1);
    }

    .wswpt {
        bottom: -150px;
        left: 12%;
    }

    .szpt {
        bottom: -30px;
        left: 32%;
    }

    .kqpt {
        bottom: -30px;
        right: 33%;
    }

    .zhglpt {
        bottom: -150px;
        right: 12%;
    }
</style>
